<template>
  <div id="myChartD" :style="{ width: '100%', height: '300px' }"></div>
</template>
 
<script setup>
import { EcartsD } from "@/api/indexHome";

import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
const erd = elementResizeDetectorMaker();
let myChart;
const initMyChart = () => {
  myChart = echarts.init(document.getElementById("myChartD"));
};

import {
  reactive,
  getCurrentInstance,
  onMounted,
  inject,
  computed,
  toRaw,
} from "vue";

const parentDataD = inject("parentDataD");

/// 声明定义一下echart
let echart = echarts;
watch(
  () => parentDataD.value.staFalsD,
  (newValue) => {
    EcartsAPOT(parentDataD.value);
  },
  { deep: true }
);
onMounted(async () => {
  await nextTick();
  initMyChart();
  EcartsAPOT(parentDataD.value);
  erd.listenTo(document.getElementById("myChartD"), function () {
    myChart.resize();
  });
});
function EcartsAPOT(obj) {
  let data = {
    state: obj.state,
    wareIds: toRaw(obj.wareIds),
  };
  if (obj.state == 0) {
    data.createTime = obj.createTime;
  } else {
    data.createTime = obj.monthD;
  }
  EcartsD(data).then((res) => {
    let arrcangku = res.data.cangku;
    let warehouse = [],
      warehousData = [],
      warehouseData = [];
    if (res.status == 200) {
      let arraywareh = [];
      if (obj.state == 0) {
        arraywareh = res.data.saleWareDayMoney;
        for (let j = 0; j < arrcangku.length; j++) {
          if (arraywareh.length != 0) {
            for (let i = 0; i < arraywareh.length; i++) {
              if (arrcangku[j].id == arraywareh[i].warehouseId) {
                warehouse.push(arraywareh[i].warehouseName);
                warehousData.push(arraywareh[i].dayMoney);
                warehouseData.push(arraywareh[i].dayIncidentalMoney);
              } else {
                warehouse.push(arrcangku[j].name);
                warehousData.push(0);
                warehouseData.push(0);
              }
            }
          } else {
            warehouse.push(arrcangku[j].name);
            warehousData.push(0);
            warehouseData.push(0);
          }
        }
      } else {
        arraywareh = res.data.saleWareMonthMoney;
        for (let j = 0; j < arrcangku.length; j++) {
          if (arraywareh.length != 0) {
            for (let i = 0; i < arraywareh.length; i++) {
              if (arrcangku[j].id == arraywareh[i].warehouseId) {
                warehouse.push(arraywareh[i].warehouseName);
                warehousData.push(arraywareh[i].monthMoney);
                warehouseData.push(arraywareh[i].monthIncidentalMoney);
              } else {
                warehouse.push(arrcangku[j].name);
                warehousData.push(0);
                warehouseData.push(0);
              }
            }
          } else {
            warehouse.push(arrcangku[j].name);
            warehousData.push(0);
            warehouseData.push(0);
          }
        }
      }
      initChart(warehouse, warehousData, warehouseData);
    }
  });
}
onUnmounted(() => {
  erd.uninstall(document.getElementById("myChartD"));
});
const day = new Date().getDate();
// 基础配置一下Echarts
function initChart(warehouse, warehousData, warehouseData) {
  // 把配置和数据放这里
  myChart.setOption({
    legend: {
      data: ["仓库销售金额（元）", "仓库支出金额（元）"],
    },

    xAxis: {
      type: "category",
      data: warehouse,
      axisTick: {
        alignWithLabel: true,
      },
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "仓库销售金额（元）",
        type: "bar",
        data: warehousData,
        smooth: true,
      },
      {
        name: "仓库支出金额（元）",
        type: "bar",
        data: warehouseData,
      },
    ],
  });
}
</script>